<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .parent-div {
            width: 400px;
            height: 700px;
            border: 2px solid #e0e0e0;
            border-radius: 5px;
        }

        .in {
            color: #999;
            border: 2px solid #e0e0e0;
            border-radius: 5px;
        }

        .select-in {
            border-color: #999;
            border: 2px solid #e0e0e0;
            border-radius: 5px;
        }

        .div1 {
            margin-bottom: 6px;
            display: flex;
            /* 使用flex布局 */
            align-items: center;
            /* 垂直居中对齐 */
        }

        .form-label {
            width: 90px;
            text-align: right;
            margin-right: 10px;
        }

        .random {
            width: 70px;
            height: 22px;
            color: #4943f2;
            background-color: #d8b7e3;
            text-align: center;
            margin-left: 5px;

            display: inline-flex;
            justify-content: center;
            align-items: center;

        }

        .click {
            margin-left: 5px;
            width: 22px;
            height: 22px;
        }

        /* 滑动条样式 - 通用设置 */
        input[type="range"] {
            appearance: none;
            width: 150px;
            height: 8px;
            border-radius: 0px;
            background: #e3ddd8;
            /* 未选中部分的背景色 */
            outline: none;
            cursor: pointer;

        }

        input[type="range"]::-webkit-slider-thumb {
            appearance: none;
            width: 10px;
            height: 20px;
            background: #ebe6e1;
            border-radius: 0px;
            /* 滑块变成长方形（直角） */
            cursor: pointer;
        }
        .introduce{
            width: 200px;
            height: 140px;
        }
        .btn {
          margin-left: 100px; 
        }
    </style>
</head>

<body>
    <div class=" parent-div">
        <p style="color: blue;">欢迎注册会员</p>
        <form action="">


            <div class="div1">
                <span class="form-label"><strong>手机号码:</strong></span>
                <input type="text" value="11位手机号" class="in">
                <span style="color: red; margin-left: 5px;">必填</span>
            </div>
            <div class="div1">
                <span class="form-label"><strong>创建密码:</strong></span>
                <input type="text" value="8位密码" class="in">
                <span style="color: red; margin-left: 5px;">必填</span>
            </div>
            <div class="div1">
                <span class="form-label"><strong>注册邮箱:</strong></span>
                <input type="text" value="例如:wustzz@sina.com" class="in">
                <span style="color: red; margin-left: 5px;">必填</span>
            </div>
            <div class="div1">
                <span class="form-label"><strong>验证码:</strong></span>
                <input type="text" class="in">
                <span class="random">UJFg</span>
                <img class="click" src="./arrow_03.png" alt="" onclick="Refresh()">
            </div>
            <div class="div1">
                <span class="form-label"><strong>性别:</strong></span>
                <input type="radio" name="sex" class="in" id="male">
                <label for="male">男</label>
                <input type="radio" name="sex" class="in" id="female">
                <label for="female">女</label>
            </div>
            <div class="div1">
                <span class="form-label"><strong>生日:</strong></span>
                <input type="text" value="年  /月/日" style="text-indent: 8px;" class="select-in">
            </div>
            <div class="div1">
                <span class="form-label"><strong>年龄:</strong></span>
                <input type="text" class="in">
            </div>
            <div class="div1">
                <span class="form-label"><strong>籍贯:</strong></span>
                <select name="" id="" class="select-in">
                    <option value="">湖北省</option>
                    <option value="">四川省</option>
                    <option value="">广西省</option>
                    <option value="">广东省</option>
                    <option value="">湖南省</option>
                </select>
                <select name="" id="" class="select-in">
                    <option value="">武汉</option>
                    <option value="">孝感</option>
                    <option value="">黄冈</option>
                    <option value="">咸宁</option>
                </select>
            </div>
            <div class="div1">
                <span class="form-label"><strong>个人学历:</strong></span>
                <select name="" id="" style="width: 180px;" class="select-in">
                    <option value="">本科</option>
                    <option value="">专科</option>
                    <option value="">研究生</option>
                </select>
            </div>
    
            <div class="div1">
                <span class="form-label"><strong>月薪:</strong></span>
                <input type="range" id="salaryRange">
                <span id="salaryValue">5000</span>
            </div>
    
            <div class="div1">
                <span class="form-label"><strong>个人爱好:</strong></span>
                <input type="checkbox" >唱歌
                <input type="checkbox" >跑步
                <input type="checkbox" >游泳
    
            </div>
    
            <div class="div1">
                <span class="form-label"><strong>个人照片:</strong></span>
                <input type="file" id="">
            </div>
    
            <div class="div1">
                <span class="form-label"><strong>个人介绍:</strong></span>
                <textarea id="" class="introduce"></textarea>
            </div>
            <div>
                <button type="submit" class="btn">提交</button>
                <button type="reset" >重填</button>
            </div>
        </form>
        

    </div>
</body>
<script>
    let chars = [
        1, 2, 3, 4, 5, 6, 7, 8, 9,
        'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z',
        'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'
    ];
    let refresh = document.querySelector('.random')
    function Refresh() {
        let endchar = '';
        for (let i = 0; i < 4; i++) {
            let randomIndex = Math.floor(Math.random() * chars.length);
            endchar += chars[randomIndex];
        }
        refresh.innerHTML = endchar
    }


        const salaryRange = document.getElementById('salaryRange');
        const salaryValue = document.getElementById('salaryValue');
        // 为滑块添加input事件监听器
        salaryRange.addEventListener('input', function () {
            salaryValue.textContent = this.value*100;
        });
    

</script>
</html>